<template>
	<div style="margin-left: 6px;" class="u-flex u-row-left">
		<el-image v-for="(item,index) in list" class="img" :src="item" />
		<span class="s" v-if="num-list.length>0">
			{{num-list.length}}
		</span>
	</div>
</template>
<script>
	import {
		reactive,
		toRef,
		ref,
		computed,
		onMounted
	} from 'vue';
	export default {
		name: 'imageList',
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			num: {
				type: Number,
				default: 0
			}
		},
		setup(props, ctx) {
			return {}
		}
	}
</script>
<style scoped>
	.s {
		font-size: 10px;
		color: #FFFFFF;
		width: 24px;
		height: 24px;
		background: #256FFF;
		border-radius: 50%;
		border: 1px solid #cfcfcf;
		margin-left: -6px;
		display: block;
		text-align: center;
		line-height: 24px;
	}

	.img {
		width: 24px;
		height: 24px;
		border: 1px solid #cfcfcf;
		border-radius: 50%;
		margin-left: -6px;

	}
</style>